//用户展示

<template>
  <div id="div">
    <el-col :span="24" class="qqq">
      <div>
        <el-col :span="24">
          <div class="rightHead">
            <span class="s1">用户展示</span>
            <span class="s2"></span>
            <span class="exit">退出登录</span>
          </div>
        </el-col>
      </div>
      <div class="d-t"></div>
      <div class="d-e">
        <div class="d-e-con">
          <input class="d-in1" placeholder="请输入内容" v-model="input2" type="text">
          <button class="d-btn1" @click="query">搜索</button>
        </div>
      </div>
      <div  id="d_div1">

        <div style="width: 900px; background-color: white;margin-left:60px; margin-top: 30px ">

          <el-row :gutter="20">
            <el-col :span="18">
              <div>
              </div>
              <div class="grid-content bg-purple d_div2" :style="{'height':H+'px'}">
                <el-table
                        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        stripe
                        style="width: 100%"
                        :default-sort = "{prop: 'date', order: 'ascending'}">
                  <el-table-column
                          prop="id1"
                          label="用户ID"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="account1"
                          label="账号"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="password1"
                          label="密码"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="title1"
                          label="昵称"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="name1"
                          label="姓名"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="email1"
                          label="邮箱"
                          width="180">
                  </el-table-column>
                  <el-table-column
                          prop="operation"
                          label="操作"
                          width="120">

                      <template slot-scope="scope">
                          <a @click="active(scope.$index,scope.row)" type="text" size="small" style="cursor: pointer">详情</a>
                      </template>
                  </el-table-column>
                </el-table>

                <!--              弹框-->
                <el-dialog
                        title="基本信息"
                        :visible.sync="dialogVisible"
                        width="50%" style="text-align: left">
                  <hr>
                  <span class="sp1">账号:</span>
                  <span :v-model="account">{{account}}</span>
                  <span class="sp1">昵称:</span>
                  <span :v-model="title">{{title}}</span>
                  <br>
                  <br>
                  <br>
                  <span class="sp1">密码:</span>
                  <span :v-model="pass">{{pass}}</span>
                  <span class="sp1">真实姓名:</span>
                  <span :v-model="name">{{name}}</span>
                  <span class="sp1">邮箱:</span>
                  <span :v-model="email">{{email}}</span>
                  <hr>
                  <div class="d_div3" style="text-align: left">
                    <el-table
                            :data="tableData2"
                            stripe
                            style="width: 100%;"

                            :default-sort = "{prop: 'date', order: 'ascending'}">
                      <el-table-column
                              label="收货地址："
                              width="120"
                      >
                      </el-table-column>
                      <el-table-column
                              prop="address"
                              width="500"
                      >
                      </el-table-column>
                      <el-table-column
                              prop="name"
                              width="160">
                      </el-table-column>

                      <el-table-column
                              prop="phone"
                              width="160">
                      </el-table-column>
                    </el-table>
                  </div>
                  <hr>
                  <div class="d_div4">
                    <span class="sp1">交易统计:</span>
                    <ul>
                      <li>
                        <span>上次消费时间</span>
                        <span :v-model="date">{{date}}</span>
                        <span :v-model="datetime" style="margin-top: -10px">{{datetime}}</span>
                      </li>
                      <li>
                        <span>累计消费金额</span>
                        <span :v-model="money">￥{{money}}</span>
                      </li>
                      <li>
                        <span>累计订单数</span>
                        <span :v-model="order">{{order}}</span>
                      </li>
                      <li>
                        <span>累计退款金额</span>
                        <span :v-model="money2">￥{{money2}}</span>
                      </li>
                      <li>
                        <span>累计退款数</span>
                        <span :v-model="order2">{{order2}}</span>
                      </li>
                    </ul>
                  </div>

                  <i slot="footer" class="dialog-footer" >
                    <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
                  </i>
                </el-dialog>

              </div>

            </el-col>

          </el-row>
        </div>
        <div style="margin-left: -20px;margin-top: 10px">
          <el-pagination
                  layout="total, prev, pager, next,jumper"
                  @current-change="current_change"
                  :total="total"
                  :page-size="pagesize"
                  background
          >
          </el-pagination>
        </div>
      </div>
    </el-col>

  </div>
</template>

<style lang="less">
  .rightHead{
    width: 1020px;
    background: white;
    height: 60px;
    line-height: 60px;
    text-align: left;
  }
  .s1{
    margin-left: 50px;
    font-size: 18px;
  }
  .s2{
    display: inline-block;
    width: 750px;
  }
  .exit{
    display: inline-block;
    text-align: center;
    border: none;
    margin-left:10px;
    cursor: default;
  }

  #div1{
    background-color: rgb(240,240,248);
    margin:0
  }
  .qwe {
    width: 1000px;
    height:auto;

  }
  .d_div1 {
    height: 56px;
    border-bottom: 1px solid black;
    h3{
      line-height: 56px;
      text-align: left;
    }
  }
  .d_div2{
    margin-top: 20px;
    width: 900px;
    background-color: white;
    border-radius: 20px;
    hr{
      margin: 20px 0;
    }
    .el-table td, .el-table th{
      text-align: center;
    }
    .el-dialog span{
      display: inline-block;
      width: 160px;
      text-align: center;
    }
    .el-dialog .sp1{
      text-align: right;
      display: inline-block;
      width: 100px;
      font-size: 18px;
      font-weight: bold;
    }
    .el-dialog .sp2{
      display: inline-block;
      width: 200px;
      text-align: center;
    }
    .el-dialog__title{
      font-size: 24px;
    }
    .el-dialog__header{
      text-align: center;
    }
    .el-dialog__body{
      padding: 0;
    }
    .el-dialog__footer{
      margin-top: 20px;
    }
    .d_div3{
      line-height: 10px;
    }
    .d_div4{
      ul{
        height: 100px;
        position: relative;
        top:0;
        left: 100px;
        li{
          width: 150px;
          height: 100px;
          float: left;
          border: 1px solid black;
          margin-left: -1px;
          span{
            height: 35px;
            display: block;
            margin: 5px 0;
            text-align: center;
            font-size: 16px;
          }
        }
      }
    }
    .d_div3>div>div>table>tbody>tr>.el-table_2_column_9{
      text-align: left;
    }
  }
  .input.el-input{
    margin-top: 37px;
    margin-left: 15px;
  }
  .input1{
    width: 100px;
    height: 40px;
    margin-left: 0;
    margin-top: 37px;
    background: rgb(78,137,251);
    border: 0 solid;
    color: white;
    border-radius: 8px;
  }
  .d-e{
    width: 900px;
    height: 56px;
    background: white;
    border-radius: 5px;
    margin: 10px auto 0;
    .d-e-con{
      margin-left: 50px;
      text-align: left;
      line-height: 56px;
      .d-sp1{
        display: inline-block;
        margin-left: 20px;
        font-size: 16px;
      }
      .d-in1{
        width: 200px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid rgb(192,192,192);
      }
      .d-btn1{
        width: 80px;
        height: 30px;
        border-radius: 3px;
        border: none;
        color: white;
        background: #3696FF;
        margin-left: 150px;
      }
      .d-btn2{
        width: 80px;
        height: 30px;
        border-radius: 3px;
        border: none;
        color: white;
        background: #21B9BC;
        margin-left: 20px;
      }
    }

  }


</style>

<script>
  export default {
    created:function(){
      let height2= document.documentElement.clientHeight;
      this.H=height2-220;
      this.$axios({
        url:'/api/get',
        method:'post',
        data:{}
      }).then((res)=>{
        for (let i = 0; i < res.data.length; i++) {
          let arr = {
            id1:res.data[i].u_id,
            account1: res.data[i].u_account,
            password1: res.data[i].u_pass,
            title1: res.data[i].u_title,
            name1:res.data[i].u_name,
            email1:res.data[i].u_email,
          };
          this.tableData.push(arr);
        }
      })
    },
    updated:function(){
      this.total=this.tableData.length;
    },

    data() {
      return {
        input2:'',
        account:0,
        date:0,
        datetime:0,
        money:0,
        money2:0,
        order:0,
        order2:0,
        pass:0,
        title:0,
        email:0,
        name:0,
        H:0,
        total:0,
        pagesize:10,//每页的数据条数
        currentPage:1,//默认开始页面
        dialogVisible: false,
        tableData: [],
        tableData2:[]
      };
    },

    methods: {
      current_change:function(currentPage){
        this.currentPage = currentPage;
      },
      active(index,row){
        if (this.tableData2.length){
          this.tableData2=[]
        }
        this.dialogVisible = true;
        this.account=row.account1;
        this.title=row.title1;
        this.name=row.name1;
        this.pass=row.password1;
        this.email=row.email1;
        this.$axios({
          url:'/api/getaddress11',
          method:'post',
          data:{
            id:row.id1
          }
        }).then((res)=>{
          for (let i = 0; i < res.data.length; i++) {
            let arr2 = {
              address:res.data[i].d_address,
              name: res.data[i].d_name,
              phone: res.data[i].d_phone,
            };
            this.tableData2.push(arr2);
          }

        })
        //获取最后购买时间
        this.$axios({
          url:'/api/gettrade',
          method:'post',
          data:{
            id:row.id1
          }
        }).then((res)=>{
          var now = new Date(res.data[0].a)
          var year = now.getFullYear()
          var month =(now.getMonth() + 1).toString();
          var day = (now.getDate()).toString();
          var hour=now.getHours();
          var minute=now.getMinutes();
          var second=now.getSeconds();
          if (month.length == 1) {
            month = "0" + month;
          }
          if (day.length == 1) {
            day = "0" + day;
          }
          if (hour<10) {
            hour = "0" + hour;
          }
          if (minute<10) {
            minute = "0" + minute;
          }
          if (second<10) {
            second = "0" + second;
          }

          this.date=year+'-'+month+'-'+day
          this.datetime=hour+':'+minute+':'+second
          // var year=res.data[0].a.getFullYear();
          // this.date=year
            // console.log(res)
        });
        //获取总消费
        this.$axios({
          url:'/api/getmoney',
          method:'post',
          data:{  id:row.id1}
        }).then((res)=>{
          this.money=res.data[0].a
        });
        //获取订单数
        this.$axios({
          url:'/api/getorder',
          method:'post',
          data:{  id:row.id1}
        }).then((res)=>{
          this.order=res.data.length
        });
        //获取退款总金额
        this.$axios({
          url:'/api/getmoney2',
          method:'post',
          data:{  id:row.id1}
        }).then((res)=>{
            this.money2=res.data[0].a
        });
        //获取退款数
        this.$axios({
          url:'/api/getorder2',
          method:'post',
          data:{  id:row.id1}
        }).then((res)=>{
          this.order2=res.data.length
        });

      },
      query(){
        this.tableData=[];
        this.$axios({
          method:'post',
          url:'/api/getquery',
          data:{
            input:this.input2
          }
        }).then((res)=> {
          for (let i = 0; i < res.data.length; i++) {
            let arr = {
              id1:res.data[i].u_id,
              account1: res.data[i].u_account,
              password1: res.data[i].u_pass,
              title1: res.data[i].u_title,
              name1:res.data[i].u_name,
              email1:res.data[i].u_email,
            };
            this.tableData.push(arr);
          }
        })
      },
    },
  };

</script>